<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* 设置全局样式,把外边框和内边框给去掉 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #main {
            height: 420px;
            width: 360px;
            /* 边框的大小颜色和边框的样式(线/虚线等等) */
            border: 10px #000 solid;
            background-color: #b7d4a8;
            /* 改变其边框的椭圆程度 */
            border-radius: 20px;
            /* 外边距 上下50px 左右auto 实现居中效果 */
            margin: 50px auto;
        }

        /* 设置游戏主窗口的样式 */
        #stage {
            width: 304px;
            height: 304px;
            border: 2px solid #000;
            margin: 20px auto;
            /* 开启相对定位 */
            position: relative;
        }

        #snake>div {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
            border: 1px solid #b7d4a8;
        }

        /*设置贪吃蛇食物的样式, */
        #food {
            width: 10px;
            height: 10px;
            /* 开启绝对定位,让其移动的时候的空间会依照stage主窗口为相对来进行移动  */
            position: absolute;
            top: 100px;
            left: 100px;
            /* 如果不设置弹性盒让其内的元素限制在内,会导致一个元素的塌陷. */
            display: flex;
            /* 再让他自动换行 ,刚好填满元素格*/
            flex-flow: wrap;
        }

        #food>div {
            width: 5px;
            height: 5px;
            background-color: #000;
            /* 让其旋转45度 */
            transform: rotate(45deg);
        }

        #info {
            /* 将其与上面的窗口对其 */
            width: 304px;
            /* 设置外边距让其与上面的窗口离的远一点,然后水平居中! */
            margin: 30px auto;
            /* 水平排列 */
            display: flex;
            /* 
        space-between
        在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
        */
            justify-content: space-between;
            /* 设置字体样式 */
            font: bold 20px courier;
        }
    </style>
</head>

<body>
    <!-- main 主要 -->
    <div id="main">
        <!-- stage 舞台,游戏运行的主窗口 -->
        <div id="stage">
            <div id="snake">
                <div></div>
            </div>
            <div id="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <!-- info 信息 -->
        <div id="info">
            <!-- 分别创造分数和等级 -->
            <div>score <span id="score">1</span></div>
            <div>level <span id="level">1</span></div>
        </div>
    </div>
    <script>
        /* 
        第一步
            先实现蛇的移动，让其移动起来，先获取其元素
            获取键盘输入值，再利用计时器去操作蛇的XY轴，left top偏移量来移动蛇
        第二步
            实现其食物的在被蛇触碰后实现随机移动 生成XY轴，再去替换其XY轴，去实现 

        
        */
        // 获取蛇
        const snake = document.getElementById("snake")
        // 蛇的全部身体 
        const snakes = snake.getElementsByTagName("div")
        const food = document.getElementById("food")
        // 创建一个值来存储键盘的值
        let dir
        document.addEventListener("keydown", event => {
            dir = event.key
        })
        const changeFood = () =>{
            // 向下取整 0-30
            const x  = Math.floor(Math.round() *30)*10
            const y  = Math.floor(Math.round() *30)*10
            food.style.top = y +"px"
            food.style.left = x +"px"

        }
        
        setTimeout(move= () => {
            const head = snakes[0]
            let x = head.offsetLeft
            let y = head.offsetTop
            switch (dir) {
                case "a": x -= 10
                    break;
                case "d": x += 10
                    break
                case "w": y -= 10
                    break;
                case "s": y += 10
                    break;
            }
            head.style.top = y + "px"
            head.style.left = x + "px"
            changeFood()
            setTimeout(move, 100);
            
        }, 100);

    </script>

</html>